<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="htt、p://at.alicdn.com/t/font_1473987_p34tlh0h33f.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/lunbo.css">
    <link rel="stylesheet" type="text/css" href="css/zhuqiu.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="../js/lunbo.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/footer.js"></script>
    <script>
        $(document).ready(function () {
            $.post('https://api.apiopen.top/musicRankings', function (data, status, xhr) {
                if (getCookie('username').length>=3) {
                    $('.icon-icon-user').hover(function () {
                        $('.icon-icon-user').hover(function () {
                            $('.yonghu1').css('display', 'block') //搭载登出和信息的div
                        })
                        $('.yonghu1').hover(function () {
                            $('.yonghu1').css('display', 'block')
                        }, function () {
                            $('.yonghu1').css('display', 'none')
                        })
                    })
                }else{
                    $('.icon-icon-user').hover(function () {
                        $('.icon-icon-user').hover(function () {
                            $('.yonghu').css('display', 'block') //搭载登录和注册的div
                        })
                        $('.yonghu').hover(function () {
                            $('.yonghu').css('display', 'block')
                        }, function () {
                            $('.yonghu').css('display', 'none')
                        })
                    })
                }
            })

            $('.yonghu1 a').eq(0).click(function(){
                clearCookie('username')
                alert('成功注销')
                window.location.href="index.html"
            })
            $('.yonghu1 a').eq(1).click(function(){
                window.location.href="personal.html"
            })
        })
    </script>
</head>

<body>
    <!-- header顶部导航-用户 -->
    <div class="header">
        <!-- 包裹左右模块的div -->
        <div class="header-wrap">
            <!-- 顶部导航左模块 -->
            <div class="header-left">
                <div class="menu">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="ProductListServlet">商城</a></li>
                        <li><a href="AdminAllListServlet">管理员列表</a></li>
                        <li><a href="UserAllListServlet">用户列表</a></li>
                        <li><a href="ProductAllListServlet">商品列表</a></li>
                    </ul>
                </div>
            </div>
            <!-- 顶部导航右模块 -->
            <div class="header-right">
                <ul>
                    <li class="iconfont icon-icon-user"><a href=""></a></li>
                    <li class="iconfont icon-fangdajing"><a href=""></a></li>
                </ul>
            </div>
            <!-- 划过用户图标出现的div -->
            <div class="yonghu">
                <div class="yonghubg"></div>
                <a href="login.html"><button>登录</button></a>
                <a href="zhuce.html"><button>注册</button></a>
            </div>
            <!-- 登录后更改信息 -->
            <div class="yonghu1">
                <div class="yonghubg1"></div>
                <a href="#"><button>登出</button></a>
                <a href="#"><button>信息</button></a>
            </div>
        </div>
    </div>

    <!-- header顶部导航-管理员 -->
    <div class="header1">
        <!-- 包裹左右模块的div -->
        <div class="header1-wrap">
            <!-- 顶部导航左模块 -->
            <div class="header1-left">
                <div class="menu1">
                    <ul>

                        <li><a href="index.html">首页</a></li>
                        <li><a href="shoplist.html">商品管理</a></li>
                        <li><a href="">用户管理</a></li>
                        <li><a href="">订单管理</a></li>
                    </ul>
                </div>
            </div>
            <!-- 顶部导航右模块 -->
            <div class="header1-right">
                <ul>
                    <li class="iconfont icon-icon-user"><a href=""></a></li>
                    <li class="iconfont icon-fangdajing"><a href=""></a></li>
                </ul>
            </div>
            <!-- 划过用户图标出现的div -->
            <div class="yonghu">
                <div class="yonghubg"></div>
                <a href="login.html"><button>登录</button></a>
                <a href="zhuce.html"><button>注册</button></a>
            </div>
            <!-- 登录后更改信息 -->
            <div class="yonghu1">
                <div class="yonghubg1"></div>
                <a href="#"><button>登出</button></a>
                <a href="#"><button>信息</button></a>
            </div>
        </div>
    </div>

    <!-- 主体 -->
    <div class="middle">
        <!-- 轮播包裹层 -->
        <div class="lunbowrap">
            <div class="img">
                <img src="images/28K$A7XK$O`VXXXA}8NGMV6.png">
                <img src="images/binpang.png">
                <img src="images/QQ图片20191111202807.jpg">
                <img src="images/S4LWIKOGNCQS)HEQYU@P}}G.png">
                <img src="images/QQ图片20191111203946.jpg">
            </div>
            <!-- 轮播图上的左右箭头 -->
            <div class="divbottom">
                <span id="span1">
                    <</span> <span id="span2">>
                </span>
            </div>
            <!-- 轮播图的底部按钮 -->
            <div class="divbottom-li">
                <ul id="divbottom_u">
                    <li style="background:white; color: black;">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
        <!-- 介绍足球的div -->
        <div class="content-bottom">
            <!-- 文字的背景层 -->
            <div class="zhuqiubg"></div>
            <!-- 文字部分 -->
            <div class="zhuqiu">
                <h3>足球</h3>
                <p class="m_1">
                    足球，英文football，被誉为“世界第一运动”，全球体育界最具影响力的体育运动。
                    标准的11人制足球比赛由两队各派10名球员与1名守门员，总共22人，在长方形的草地球场上对抗、防守、进攻。
                </p>
                <p class="m_2">
                    比赛时尽量将足球射入对方的球门内，每射入一球就可以得到一分，当比赛完毕后，得分多的一队则胜出。如果在比赛规定时间内得分相同，则须看比赛章则而定，可以抽签、加时再赛或互射点球（十二码）等形式比赛分高下。
                    足球比赛中除了守门员可以在己方禁区内利用手部接触足球外，球场上每名球员只可以利用手以外的身体其他部分控制足球（开界外球例外）。
                </p>
                <p class="m_3">
                    当今世界足球水平最高的联赛是欧洲足球五大联赛。分别是西甲联赛，英超联赛，意甲联赛，德甲联赛，法甲联赛。
                </p>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="footer">
        <div class="footer-wrap">
            <div class="row">
                <div class="footer-ul">
                    <ul>
                        <h4>商品</h4>
                        <li id="bottom-bsk"><a href="#">篮球</a></li>
                        <li id="bottom-ftb"><a href="#">足球</a></li>
                        <li id="bottom-yumao"><a href="#">羽毛球</a></li>
                    </ul>
                </div>
                <div class="footer-ul">
                    <ul>
                        <h4>关于</h4>
                        <li><a href="#">价格</a></li>
                        <li><a href="#">质量</a></li>
                        <li><a href="#">保障
                            </a></li>
                    </ul>
                </div>
                <div class="footer-ul">
                    <ul>
                        <h4>客户支持</h4>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">订单跟踪</a></li>
                        <li><a href="#">保修</a></li>
                    </ul>
                </div>
                <div class="footer_bottom">
                    <div class="copy">
                        <p>版权 © 2014.公司保留所有权利.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>

</html>